<template>
    <div class="scalable-pages">
        <main class="main">
            <div class="container">
                <div class="section1">
                    <div class="content-inner">
                        <div class="title" v-animate-on-scroll="'fadeInUp'">关于我们
                            <div class="red" v-animate-on-scroll="'fadeInUp'"></div>
                        </div>

                        <div class="content" v-animate-on-scroll="'fadeInRight'">
                            <!-- 使用 v-html 渲染富文本内容 -->
                            <div v-html="webConfig.about_us || defaultAboutContent"></div>
                        </div>
                    </div>

                    <div class="cover-img">
                        <img src="https://www.kdxwindowfilm.com/banners/static/about-1.jpg" alt="" />
                    </div>
                </div>

                <div class="section2">
                    <div class="content-inner">
                        <img src="https://www.kdxwindowfilm.com/banners/static/tc7.png" style="width:100%" alt="" />
                    </div>
                </div>

                <div class="section3">
                    <img class="img1" src="https://www.kdxwindowfilm.com/banners/static/dh.png" />

                    <div class="content-inner">
                        <div class="title" v-animate-on-scroll="'fadeInUp'">发展历史
                            <div class="red" v-animate-on-scroll="'fadeInUp'"></div>
                        </div>

                        <div class="img2-wrapper" v-animate-on-scroll="'fadeInUp'">
                            <img :src="webConfig.about_history || 'https://www.kdxwindowfilm.com/banners/static/z2.png'"
                                class="img2" />
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
import rate from "../components/rate.vue";
import { useConfigStore } from '@/store/config';
import { storeToRefs } from 'pinia';

export default {
    components: {
        Swiper,
        SwiperSlide,
        rate,
    },
    setup() {
        const configStore = useConfigStore();
        const { webConfig } = storeToRefs(configStore);

        return {
            webConfig
        };
    },
    data() {
        return {
            swiperOptions: {
                slidesPerView: 1,
                spaceBetween: 0,
                loop: true,
            },
            // 默认内容，当接口数据未加载时显示
            defaultAboutContent: `
                <p>张家港康得新光电材料有限公司成立于2011年，致力于构建以光学膜为核心的先进高分子材料产业平台。2014年起，公司在国内率先研发、生产高端汽车与建筑窗膜、漆面保护膜等，开启了国内汽车三膜市场发展新纪元。</p>
                <p>十多年来，公司坚持以技术创新引领行业发展，先后填补了国内光学膜领域的多项空白。公司成功建设1个国家级检测中心、4个高等级实验室，先后主导和参与制订行业国标、行标数十项，累计获授权专利近1000件，其中发明专利近600件，专利数量、质量均在业内遥遥领先。公司掌握从产业链最前端的树脂配方与合成、高精密模具设计加工、光学膜系结构设计，到末端生产的共挤出拉伸、高精密涂布、多腔真空溅镀、UV瞬间固化和柔性电子印刷与封装等覆盖产业链各个环节前沿的8大核心技术。公司作为业界公认领先的先进高分子材料产业平台，为客户稳定提供了高品质的领先产品和服务。</p>
                <p>未来，康得新将继续聚焦先进高分子材料产业平台的建设与发展。公司将坚持为客户提供高效、有竞争力、安全可信赖的产品和服务，为客户创造更大价值，共同推动相关行业与社会整体的发展进步。</p>
            `
        };
    },
};
</script>

<style lang="less" scoped>
.banners {
    width: 100%;
    display: black;
}

.swipers {
    width: 100%;
}

.main {
    background-color: white;
}

img {
    display: inline-block;
    vertical-align: bottom;
}

.container {
    margin: 0 auto;
}

.section1 {
    position: relative;
    display: flex;
    flex-direction: row;

    .cover {
        width: 40%;
    }

    .content-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 2%;

        .title {
            font-size: 40px;
            font-weight: bold;
            color: #000;
            letter-spacing: 15px;
            line-height: 1.2;
            margin-left: 10%;
        }

        .red {
            width: 100px;
            height: 13px;
            background-color: #c5000a;
            margin: 20px 0;
            margin-top: 50px;
        }

        .content {
            margin-top: 20px;
            padding-left: 130px;
            padding-right: 30px;
            box-sizing: border-box;
            color: #222;
            font-size: min(21px, 1.8vw);

            // 富文本内容样式
            ::v-deep p {
                color: inherit;
                font-size: min(20px, 18px);
                line-height: 35px;
                text-indent: 2em;
                margin: 4px 0;
                padding: 0;
            }

            ::v-deep img {
                max-width: 100%;
                height: auto;
                margin: 10px 0;
            }

            ::v-deep a {
                color: #c5000a;
                text-decoration: underline;
            }

            ::v-deep ul,
            ::v-deep ol {
                padding-left: 2em;
                margin: 10px 0;
            }

            ::v-deep li {
                line-height: 35px;
            }
        }
    }
}

.section2 {
    width: 100%;
    overflow: hidden;

    img {
        display: block;
    }
}

.section3 {
    background-image: url("https://www.kdxwindowfilm.com/banners/static/aboutus.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    aspect-ratio: 1.47;
    position: relative;
    background-size: 100%;

    .img1 {
        position: absolute;
        top: 2%;
        right: 5%;
        width: 750px;
        display: block;
    }

    .content-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 2%;

        .title {
            font-size: min(40px, 50px);
            font-weight: bold;
            color: #000;
            letter-spacing: 15px;
            line-height: 1.2;
            margin-left: 10%;
        }

        .red {
            width: 100px;
            height: 13px;
            background-color: #c5000a;
            margin: 20px 0;
            margin-top: 50px;
        }

        .img2-wrapper {
            margin-top: 5%;
            width: 100%;
            margin: 0 auto;
            margin-top: 120px;

            img {
                width: 100%;
            }
        }
    }
}
</style>